<script setup>
defineOptions({
  name: 'TailPrice'
})

const props = defineProps({
  price: {type: String, default: ''},
  isStart: {type: Boolean, default: true},
  classNames: {type: Array, default: () => []},
  style: {type: Object, default: () => ({})},
  yuanClassNames: {type: Array, default: () => []},
  yuanStyle: {type: Object, default: () => ({})},
  intClassNames: {type: Array, default: () => []},
  intStyle: {type: Object, default: () => ({})},
  decimalClassNames: {type: Array, default: () => []},
  decimalStyle: {type: Object, default: () => ({})},
})
</script>

<template>
  <div class="tail-price" :class="classNames" :style="style">
    <span class="yuan" :class="yuanClassNames" :style="yuanStyle">￥</span>
    <span class="int" :class="intClassNames" :style="intStyle">
      {{ price.includes('.') ? price.split('.')[0] : price }}
    </span>
    <span>.</span>
    <span class="decimal" :class="decimalClassNames" :style="decimalStyle">
      {{ price.includes('.') ? price.split('.')[1] : '0' }}
    </span>
    <span v-if="isStart" class="start">起</span>
  </div>
</template>

<style scoped lang="scss">
.tail-price {
  color: #ff5000;
  font-weight: 350;

  .int {
    font-size: 1.5rem;
  }

  .start {
    margin-left: 0.1rem;
    font-size: 0.8rem;
  }
}
</style>